<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城-产品</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/base_header_product.css">
    <link rel="stylesheet" href="css/base_footer.css">
    <link rel="stylesheet" href="css/product.css">
</head>

<body>
    <!-- 顶部菜单栏 -->
    <header>
        <!-- 顶部通栏 -->
        <div class="top">
            <!-- 版心 -->
            <div class="w1200">
                <!-- 左边url -->
                <span class="fl">乐购&emsp;legochina.cn</span>
                <!-- 右边欢迎语 -->
                <div class="welcome fr">欢迎光临乐购&emsp;请<a href="login.html">登陆</a>|<a href="register.html">注册</a>
                </div>
            </div>
        </div>
        <!-- 导航菜单栏 -->
        <div class="w1200 nav rel">
            <!-- logo -->
            <h1 class="logo abs">
                <a href="index.html">乐购</a>
            </h1>
            <!-- 店铺logo和标题 -->
            <div class="shop-logo fl">
                <div class="shop-logo-pic fl">
                    <img src="images/product/product_header.jpg">
                </div>
                <div class="shop-logo-inf fl">
                    <h3>DJI大疆旗舰店</h3>
                    <span>品牌直销</span>
                    <a href="javascript:;">收藏本店</a>
                </div>
            </div>
            <!-- 搜索框和购物车按钮 -->
            <div class="search-buy fl">
                <!-- 搜索框 -->
                <div class="search-box fl">
                    <input class="search-cont" type="text" placeholder="请输入搜索的商品名">
                    <button class="search-btn fr"></button>
                </div>
                <!-- 购物车和订单 -->
                <div class="buy-box fl"><a href="cart.html">购物车</a></div>
            </div>
        </div>
    </header>

    <!-- 假banner -->
    <nav>
        banner
    </nav>

    <!-- 详情部分 -->
    <main class="w1200 clearfix">
        <!-- 商品展示 -->
        <div class="product-show clearfix">
            <!-- 商品展示-大图 -->
            <div class="product-pic fl">
                <!-- 商品展示-大图-插件 -->
                <div id="magnifier">
                    <div class="small-box">
                        <table cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <div class="small-box">
                                        <img src="images/product/pic_1.jpg">
                                        <span class="hover"></span>
                                        <span class="hover"></span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="thumbnail-box">
                        <a href="javascript:;" class="btn btn-prev btn_prev_disabled"></a>
                        <a href="javascript:;" class="btn btn-next"></a>
                        <div class="list">
                            <ul class="wrapper">
                                <li class="item item-cur" data-src="images/product/pic_1.jpg"><img
                                        src="images/product/pic_1.jpg"></li>
                                <li class="item" data-src="images/product/pic_2.jpg">
                                    <img src="images/product/pic_2.jpg">
                                </li>
                                <li class="item" data-src="images/product/pic_3.jpg">
                                    <img src="images/product/pic_3.jpg">
                                </li>
                                <li class="item" data-src="images/product/pic_4.jpg">
                                    <img src="images/product/pic_4.jpg">
                                </li>
                                <li class="item" data-src="images/product/pic_5.jpg">
                                    <img src="images/product/pic_5.jpg">
                                </li>
                                <li class="item" data-src="images/product/pic_6.jpg">
                                    <img src="images/product/pic_6.jpg">
                                </li>
                                <li class="item" data-src="images/product/pic_7.jpg">
                                    <img src="images/product/pic_7.jpg">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="big-box">
                        <img src="images/product/pic_1.jpg">
                    </div>
                </div>
            </div>
            <!-- 商品价格 -->
            <div class="product-text fr">
                <h2>【新品首发】DJI 大疆RoboMaster S1 机甲大师 S1专业教育机器人"</h2>
                <p>寓教于乐，玩出名堂</p>
                <div class="product-price">
                    <p class="price">
                        <span>价格：</span>
                        <del>￥3800</del>
                    </p>
                    <p class="cut-price">
                        <span>促销价：</span>
                        <strong>￥3499.00 - ￥4200.00</strong>
                    </p>
                    <p class="active">
                        <span>本店活动：</span>
                        满99包邮
                    </p>
                    <p class="fare">
                        <span>运费:</span>
                        江苏苏州 至 成都 快递: 0.00
                    </p>
                    <div class="month">
                        <span>日销量 <strong>2871</strong></span>
                        <span>月销量 <strong>4871</strong></span>
                        <span>年销量 <strong>8871</strong></span>
                    </div>
                    <p class="color">
                        <span>颜色分类：</span>
                        <span class="color-text">
                            <a>机甲大师 S1RoboMaster S1套餐一</a>
                            <a>机甲大师 S1RoboMaster S1套餐一</a>
                            <a>机甲大师 S1RoboMaster S1套餐一</a>
                            <a>机甲大师 S1RoboMaster S1套餐一</a>
                            <a>机甲大师 S1RoboMaster S1套餐一</a>
                        </span>
                    </p>
                    <p class="count">
                        <span>数量：</span>
                        <input type="number" value="1">
                    </p>
                    <p class="ali">
                        <span>花呗分期：</span>
                        <a>￥1166.33*3期<br>(0手续费)</a>
                        <a>￥1166.33*3期<br>(0手续费)</a>
                        <a>￥1166.33*3期<br>(0手续费)</a>
                    </p>
                    <p class="btn">
                        <button><a href="pay.html">立即购买</a></button>
                        <button><a href="cart.html">加入购物车</a></button>
                    </p>
                    <p class="get">
                        <a href="javascript:;">收藏商品</a>
                        <a href="javascript:;">举报</a>
                    </p>
                    <p>
                        <span>服务承诺:</span>
                        正品保证 急速退款 赠运费险 七天无理由退换
                        <a>支付方式</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- 商品介绍 -->
        <div class="product-inf">
            <!-- 商品介绍-左边 -->
            <div class="product-inf-l fl ">
                <!-- 商品介绍-tab栏 -->
                <div class="tabs ">
                    <ul class="fl">
                        <li class="tabOn">产品详情</li>
                        <li>累积评价</li>
                    </ul>
                </div>
                <!-- 商品介绍-内容 -->
                <div class="product-inf-conts clearfix">
                    <!-- 商品介绍-内容-产品介绍图 -->
                    <div class="product-inf-cont1 product-inf-cont contOn">
                        <div class="product-inf-cont1-pic1">
                            <img src="images/product/product_cont1.jpg">
                        </div>
                        <div class="product-inf-cont1-pic2">
                            <img src="images/product/product_cont2.jpg">
                        </div>
                        <div class="product-inf-cont1-pic3">
                            <img src="images/product/product_cont3.jpg">
                        </div>
                    </div>
                    <!-- 商品介绍-内容-累积评价 -->
                    <div class="product-inf-cont2 product-inf-cont">
                        <!-- 商品介绍-内容-累积评价-评分栏 -->
                        <div class="product-marks clearfix">
                            <h3>与描述相符</h3>
                            <div class="product-marks-cont">
                                <div class="product-mark fl">
                                    <span>4.5</span>
                                </div>
                                <!-- 商品介绍-内容-累积评价-评分栏-星星 -->
                                <div class="product-stars fl">
                                    <div class="product-stars-bg">
                                        <div class="product-stars-in"></div>
                                    </div>
                                </div>
                                <!-- 商品介绍-内容-累积评价-评分栏-好评率 -->
                                <div class="product-present fl">
                                    好评率90%
                                    <div class="product-present-pic">
                                        <div class="product-present-innerpic"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 商品介绍-内容-累积评价-筛选栏 -->
                        <div>
                            <div class="product-filter">
                                <input type="radio" name="2" checked>&emsp;全选
                                <input type="radio" name="2">&emsp;追加
                                <input type="radio" name="2">&emsp;图片
                                <select class="fr">
                                    <option value="volvo">按默认</option>
                                    <option value="saab">按时间</option>
                                    <option value="opel">评论数</option>
                                </select>
                            </div>
                        </div>
                        <!-- 商品介绍-内容-累积评价-评论内容 -->
                        <div class="product-comment ">
                            <div class="product-comment-cont">
                                <div class="product-comment-text fl">
                                    <p>挺不错的，机甲大师对战T-34-85</p>
                                    <img src="images/product/product_comment.jpg">
                                    <img src="images/product/product_comment.jpg">
                                    <img src="images/product/product_comment.jpg">
                                    <p>2019-09-09 13:55:30</p>
                                    <p>解释：亲，感谢您在DJI
                                        大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                                    </p>
                                </div>
                                <div class="product-comment-name fl">
                                    t***1(匿名)
                                </div>
                            </div>
                            <script>
                                for (var i = 0; i < 10; i++) {
                                    document.write(`
                                    <div class="product-comment-cont clearfix">
                                        <div class="product-comment-text fl">
                                            <p>挺不错的，机甲大师对战T-34-85</p>
                                            <p>挺不错的，机甲大师对战T-34-85</p>
                                            <img src="images/product/product_comment.jpg">
                                            <img src="images/product/product_comment.jpg">
                                            <img src="images/product/product_comment.jpg">
                                            <p>2019-09-09 13:55:30</p>
                                            <p>解释：亲，感谢您在DJI
                                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                                            </p>
                                        </div>
                                        <div class="product-comment-name fl">
                                            t***1(匿名)
                                        </div>
                                    </div>
                                    `)
                                }
                            </script>
                        </div>
                        <!-- 商品介绍-内容-累积评价-评论页码 -->
                        <div class="product-inf-page clearfix">
                            <a>上一页</a>
                            <a>1</a>
                            <a>2</a>
                            <a>3</a>
                            <a>...</a>
                            <a>下一页</a>
                            <a>末页</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品介绍-右边 -->
            <div class="product-inf-r clearfix fr">
                <h2>猜你喜欢</h2>
                <div class="product-inf-rpic">
                    <img src="images/product/product_cont_r.jpg">
                    <p>¥ 19999.00</p>
                </div>
                <div class="product-inf-rpic">
                    <img src="images/product/product_cont_r.jpg">
                    <p>¥ 19999.00</p>
                </div>
                <div class="product-inf-rpic">
                    <img src="images/product/product_cont_r.jpg">
                    <p>¥ 19999.00</p>
                </div>
                <div class="product-inf-rpic">
                    <img src="images/product/product_cont_r.jpg">
                    <p>¥ 19999.00</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <!-- 底部链接 -->
        <div class="foot-up w1200">
            <div class="foot-up-box clearfix">
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic1.jpg">
                    <span>
                        正品保障<br>
                    </span>
                    <span>
                        赠品行货&emsp;放心选购
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic2.jpg">
                    <span>
                        满86包邮<br>
                    </span>
                    <span>
                        满86元&emsp;免运费
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic3.jpg">
                    <span>
                        售后无忧<br>
                    </span>
                    <span>
                        7天无理由退货
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic4.jpg">
                    <span>
                        准时送达<br>
                    </span>
                    <span>
                        收货时间由你做主
                    </span>
                </div>
            </div>
            <!-- 链接部分 -->
            <div class="foot-up-link">
                <dl>
                    <dt>新手入门</dt>
                    <dd><a href="">购买流程</a></dd>
                    <dd><a href="">会员制度</a></dd>
                    <dd><a href="">订单查询</a></dd>
                    <dd><a href="">服务协议及隐私说明</a></dd>
                    <dd><a href="">网站地图</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="">货到付款</a></dd>
                    <dd><a href="">网上支付</a></dd>
                    <dd><a href="">礼品卡支付</a></dd>
                    <dd><a href="">其他支付</a></dd>
                </dl>
                <dl>
                    <dt>配送服务</dt>
                    <dd><a href="">配送进度查询</a></dd>
                    <dd><a href="">商品验货与签收</a></dd>
                </dl>
                <dl>
                    <dt>相关规则</dt>
                    <dd><a href="">平台规则</a></dd>
                    <dd><a href="">退换货政策</a></dd>
                    <dd><a href="">发票制度</a></dd>
                    <dd><a href="">帮助中心</a></dd>
                </dl>
                <dl>
                    <dt>App更优惠</dt>
                    <dd><img src="images/qc_code.png"></dd>
                </dl>
                <dl>
                    <dt>加微信查订单</dt>
                    <dd><img src="images/qc_code.png"></dd>
                </dl>

            </div>
        </div>
        <!-- 版权信息 -->
        <div class="foot-down">
            <div class="w1200">
                <span>
                    沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX
                    |
                </span>
                <span>
                    沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证
                </span>
                <div class="foot-down-pic">
                    举报图片
                    <img src="images/footer/foot_down_pic1.jpg">
                    <img src="images/footer/foot_down_pic2.jpg">
                    <img src="images/footer/foot_down_pic3.jpg">
                    <img src="images/footer/foot_down_pic4.jpg">
                    <img src="images/footer/foot_down_pic5.jpg">
                    <img src="images/footer/foot_down_pic6.jpg">
                </div>
            </div>
        </div>
    </footer>

    <!-- js -->
    <script src="lib/jquery.js"></script>
    <script src="lib/picture/picture.js"></script>
    <script src="js/product.js"></script>
</body>

</html>